<template>
  <div class="navigationBar">
    <div class="admin">欢迎，admin</div>
    <div id="banner">
      <div class="select">
        <div class="a" @click="getData1" :class="{ a: isA1, aa: isA2 }">
          家庭
        </div>
        <div class="b" @click="getData2" :class="{ b: isB1, bb: isB2 }">
          学校
        </div>
        <div class="c" @click="getData3" :class="{ c: isC1, cc: isC2 }">
          社区
        </div>
      </div>
<!--      通过fold展开和闭合左边导航，但此方法没有做到右边图表和表格的变化，因此注释不用-->
<!--      <img src="@/assets/image/折叠收起.png" @click="fold" />-->
    </div>
<!--    <img id="img" src="@/assets/image/折叠收起.png" @click="fold" />-->
  </div>
</template>
<script>
import emitter from '@/assets/utils/bus.js'
import { emitter1, emitter2, emitter3 } from '@/assets/utils/bus.js'
export default {
  data() {
    return {
      isHidden: true,
      activity: [],
      isA1: true,
      isA2: false,
      isB1: true,
      isB2: false,
      isC1: true,
      isC2: false,
      data: []
    }
  },
  mounted() {
    this.getData1()
  },
  components: {},
  methods: {
    fold() {
      console.log(this.isHidden)
      if (this.isHidden) {
        document.getElementById('banner').style.display = 'none'
        // id名不用加#，引号里面的是id名称！
        document.getElementById('img').style.display = 'block'
      } else {
        document.getElementById('banner').style.display = 'block'
        document.getElementById('img').style.display = 'none'
      }
      this.isHidden = !this.isHidden
    },
    async getData1() {
      // 家庭
      this.isA1 = !this.isA1
      this.isA2 = !this.isA2
      this.isB1 = true
      this.isB2 = false
      this.isC1 = true
      this.isC2 = false
      var j = 0
      // let sendData = []
      const { data: ret } = await this.$http.get(
        'infoservice/activity/queryAll'
      )
      this.activity = ret.data.list
      console.log(this.activity[0].type)
      for (var i = 0; i < this.activity.length; i++) {
        if (this.activity[i].type == 0) this.data[j++] = this.activity[i]
      }
      // 发送事件名 加发送数据
      const SLine = {
        y1Arr: [40032.0, 106886.0, 1905082.0, 312500.0, 564300.0, 712800.0],
        y2Arr: [50176.0, 90736.0, 122132.0, 152432.0, 213416.0, 257688.0]
      }
      const SPie = [
        { value: 37, name: '湖南' },
        { value: 18, name: '湖北' },
        { value: 15, name: '江西' },
        { value: 12, name: '广东' },
        { value: 8, name: '福建' },
        { value: 5, name: '重庆' },
        { value: 3, name: '安徽' },
        { value: 2, name: '四川' }
      ]
      const SBar = [135, 221, 398, 548, 798, 1008]
      emitter.emit('listData', this.data)
      emitter1.emit('SLineData', SLine)
      emitter2.emit('SPieData', SPie)
      emitter3.emit('SBarData', SBar)
    },
    async getData2() {
      // 学校
      this.isB1 = !this.isB1
      this.isB2 = !this.isB2
      this.isA1 = true
      this.isA2 = false
      this.isC1 = true
      this.isC2 = false
      let j = 0
      const { data: ret } = await this.$http.get(
        'infoservice/activity/queryAll'
      )
      this.activity = ret.data.list
      console.log(this.activity[0].type)
      for (var i = 0; i < this.activity.length; i++) {
        if (this.activity[i].type == 1) this.data[j++] = this.activity[i]
      }
      const SLine = {
        y1Arr: [43032.0, 116886.0, 203082.0, 412500.0, 564300.0, 712800.0],
        y2Arr: [55176.0, 98736.0, 132132.0, 168432.0, 229416.0, 281688.0]
      }
      const SPie = [
        { value: 40, name: '湖南' },
        { value: 16, name: '湖北' },
        { value: 11, name: '江西' },
        { value: 13, name: '广东' },
        { value: 9, name: '福建' },
        { value: 5, name: '重庆' },
        { value: 3, name: '安徽' },
        { value: 3, name: '四川' }
      ]
      const SBar = [322, 476, 663, 908, 1133, 1347]
      emitter.emit('listData', this.data)
      emitter1.emit('SLineData', SLine)
      emitter2.emit('SPieData', SPie)
      emitter3.emit('SBarData', SBar)
    },
    async getData3() {
      // 社区
      this.isC1 = !this.isC1
      this.isC2 = !this.isC2
      this.isB1 = true
      this.isB2 = false
      this.isA1 = true
      this.isA2 = false
      let j = 0
      const { data: ret } = await this.$http.get(
        'infoservice/activity/queryAll'
      )
      this.activity = ret.data.list
      console.log(this.activity[0].type)
      for (var i = 0; i < this.activity.length; i++) {
        if (this.activity[i].type == 2) this.data[j++] = this.activity[i]
      }
      const SLine = {
        y1Arr: [41532.0, 102886.0, 190082.0, 398500.0, 550300.0, 699800.0],
        y2Arr: [53176.0, 95736.0, 127132.0, 159432.0, 212416.0, 269688.0]
      }
      const SPie = [
        { value: 36, name: '湖南' },
        { value: 21, name: '湖北' },
        { value: 15, name: '江西' },
        { value: 11, name: '广东' },
        { value: 7, name: '福建' },
        { value: 5, name: '重庆' },
        { value: 3, name: '安徽' },
        { value: 2, name: '四川' }
      ]
      const SBar = [322, 476, 663, 908, 1133, 1347]
      emitter.emit('listData', this.data)
      emitter1.emit('SLineData', SLine)
      emitter2.emit('SPieData', SPie)
      emitter3.emit('SBarData', SBar)
    }
  }
}
</script>
<style lang="less" scoped>
.navigationBar {
  position: fixed;
  left: 0;
  top: 10vh;
  width: 14vw;
  height: 90vh;
  //border-right: 1px solid #f5d858;
  .admin {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(137, 9, 9);
    font-size: 20px;
    width: 150px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 0.1875rem;
    color: rgb(252, 187, 0);
    font-family: '华文行楷';
  }
  img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 14vw;
    width: 20px;
  }
  #img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 0.25rem;
    display: none;
  }
}
#banner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-right-style: solid;
  border-left-style: none;
  border-width: 0.5px;
  border-right-color: #ff000e;
  display: block;
  .select {
    // 同一个盒子，display又是block，又是flex的话会以block为准，flex失效
    width: 100%;
    height: 100%; // 80%的话banner不能使用完全
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  //background-color: aqua;
}
.a,
.b,
.c {
  padding-left: -20px;
  background-color: rgb(137, 9, 9);
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  border-radius: 0.1875rem;
  color: rgb(255, 255, 255);
  font-size: 0.5rem;
  font-family: monospace;
  font-weight: 800;
  text-indent: 1.6875rem;
  background-size: 0.625rem 0.625rem;
  background-repeat: no-repeat; // 如果不加这句，背景图片重复，图片宽小于框宽
  background-position: 0.875rem 0.1875rem;
  // 图像的左上角距离元素左边向右偏移多少，距离上边向下偏移多少
}
.a {
  background-image: url('@/assets/image/家庭.png');
}
.b {
  background-image: url('@/assets/image/学校.png');
}
.c {
  background-image: url('@/assets/image/社区.png');
}
.a:hover,
.aa {
  // .a:focus只在<a href=''></a>才有效
  background-color: rgb(225, 80, 55);
  background-image: url('@/assets/image/家庭1.0.png');
}
.b:hover,
.bb {
  background-color: rgb(225, 80, 55);
  background-image: url('@/assets/image/学校1.0.png');
}
.c:hover,
.cc {
  background-color: rgb(225, 80, 55);
  background-image: url('@/assets/image/社区1.0.png');
}
</style>
